<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <script src="https://g.alicdn.com/AWSC/AWSC/awsc.js"></script>
  <script src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.1.js"></script>
  <style>
    body {
      width: 100vw;
      height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      background-color: rgba(0, 0, 0, 0.3);
    }

    #nc {
      width: 300px;
      top: 50%;
      left: 50%;
      right: 50%;
      transform: translate(-50%, -50%) scale(1);
      border-radius: 52rpx !important;
      overflow: hidden;
      transition: all 0.2s;
    }

    #nc,
    .nc_wrapper,
    .nc_scale,
    .nc-lang-cnt {
      height: 80rpx !important;
      line-height: 80rpx !important;
    }

    .nc-lang-cnt {
      margin-right: 6px !important;
    }

    .btn_slide,
    .scale_text {
      line-height: 80rpx !important;
    }

    .nc_iconfont {
      height: 96% !important;
    }
  </style>
</head>

<body>

  <button onclick="closeWv()">关闭</button>
  <div id="nc"></div>

  <script>
    let wv;
    function closeWv() {
      wv.hide();
    }
    document.addEventListener('plusready', function () {
      wv = plus.webview.currentWebview();
      // 阿里云滑动验证  
      window.AWSC.use('nc', function (state, module) {
        window.nc = module.init({
          appkey: wv.appkey,
          scene: wv.scene,
          renderTo: 'nc',
          success: function (data) {
            uni.postMessage({
              data
            })
            wv.hide()
            window.nc.reset()
          }
        })
      })
    })  
  </script>
</body>

</html>